<template>  
  <div class="login"> 
    <div class="login_top">
      <header>
        <span class="iconfont pull_left" @click="$router.go(-1)">&#xe637;</span>
        <router-link class="pull_right" to="/register">注册</router-link>
      </header>
      <section class="bakground">
      </section>
      <form>
        <div class="form_item">
           <input type="text" name="" placeholder="请输入手机号或者邮箱" v-model="phonenumber">
        </div>
        <!-- <div class="form_item" v-if="phonelogin">
          <input type="number" name="" placeholder="验证码" v-model="phoneverification">
          <a class="clickBtn">获取验证码 ></a>
        </div> -->
        <div class="form_item">
          <input type="password" name="" placeholder="密码" v-model="passwordCode" @keyup.enter="loginto">
          <a class="clickBtn" href="#">无法登陆?</a>
        </div>
        <button type="button" :class="{'active':isWrited}"  @click="loginto">登陆</button>
        <!-- <a href="#" @click="phonelogin=!phonelogin">密码登陆></a> -->
      </form>
    </div>   
  </div>  
</template>  

<script>  
import store from "@/vuex/store";
import cookieStore from "@/base/js/cookieStore"
import { Toast } from 'mint-ui';
import axios from "axios";
export default {  
  name: 'login',  
  data() {  
    return {  
      selected: '1',
      phonelogin:true,
      phonenumber:"",
      // phoneverification:"",
      passwordCode:""
    };  
  },
  computed:{
    isWrited:function(){
      if(this.phonenumber!="" && this.passwordCode!=""){
        return true;
      }else{
        return false;
      }
    }
  },
  store,
  methods:{
    loginto:function(){
      var data="";
      var that=this;
      if(this.phonenumber.indexOf("@")>0){
        data="userEmail="+this.phonenumber+"&userPassword="+this.passwordCode+"&type=2"
      }else{
        data="userMobile="+this.phonenumber+"&userPassword="+this.passwordCode+"&type=1"
      }
      axios.get("http://huidoo.com.cn/utopia/login.action?"+data).then(function(res){
          if(res.data[0].CODE==8888){
            that.$store.commit("login");
            cookieStore.setCookie("islogin",true,7);
            cookieStore.setCookie("userId",res.data[0].data.DATA.userId,7);
            cookieStore.setCookie("userImg",res.data[0].data.DATA.userImg,7);
            cookieStore.setCookie("userName",res.data[0].data.DATA.userName,7);
            that.$store.commit("SaveUserId",res.data[0].data.DATA.userId);
            that.$store.commit("SaveUserImg",res.data[0].data.DATA.userImg);
            that.$store.commit("SaveUserName",res.data[0].data.DATA.userName);
            Toast({
              message: '登陆成功',
            });
            that.$router.push({path:"/my"});
          }else{
            Toast({
              message: '用户名或者密码错误',
            });
          }
      }).catch(function(Error){
          console.error(Error);
      })
     /* if(this.phonenumber=="15527052585" && this.passwordCode=="1234"){
        this.$store.commit("login");
        Toast({
          message: '登陆成功',
        });
        this.$router.go(-1);
      }else{
        Toast({
          message: '表单填写错误',
        });
      }*/
    }
  } 
};  
</script> 
<style type="text/css" lang="less" scoped>
  .login_top{
    header{
      padding:8px;
      position:relative;
      z-index:10;
    }
    .bakground{
      height:8em;
      width:100%;
      top:0;
      left:0;
      background:url(../assets/utopia.png) no-repeat center/contain;
    }
    form{
      .form_item{
        width:80%;
        position:relative;
        margin:0 auto;
        .clickBtn{
          position:absolute;
          right:5px;
          top:50%;
          transform:translateY(-50%);
        }
      }
      margin-top:2em;
      input{
        display:block;
        width:100%;
        margin:0 auto;
        padding:8px 2px;
        border-bottom:1px solid #dedede;
        margin-bottom:5px;
      }
      button.active{
        background: #3385ff;
      }
      button{
        display:block;
        width:80%;
        padding:8px 4px;
        margin:15px auto;
        color:#FFF;
        background:#DEDEDE;
        border:1px solid #dedede;
        border-radius:20px;
      }
      >a{
        display:block;
        margin:5px auto;
        text-align:center;
      }
    }
  }
</style>